import { CreateAictions } from '@/interfaces/hooks'
import { NButton, NSpace, DataTableColumn } from 'naive-ui'
import { createVNode, VNode, ref } from 'vue'

export const useCreateAiction = (options: CreateAictions[]): VNode => {
  return createVNode(
    NSpace,
    {
      class: '',
    },
    {
      default: () =>
        options.map((item) => {
          return createVNode(
            NButton,
            {
              type: item.type || 'primary',
              size: 'small',
              disabled: item.disabled.value,
              onClick: () => {
                item.onClick(item)
              },
            },
            {
              default: () => item.label,
            }
          )
        }),
    }
  )
}

export const useTable = function <T>() {
  const dataList = ref<T[]>([])
  const tableHeight = ref(200)
  const bordered = ref(false)
  const tableLoading = ref(false)
  const striped = ref(false)

  return {
    dataList,
    tableHeight,
    bordered,
    tableLoading,
    striped,
  }
}

export const useTableColumn = <T>(
  colList: DataTableColumn<T>[],
  publicArt: Partial<DataTableColumn<T>>
) => {
  const res = colList.map((item) => {
    return {
      ...item,
      ...publicArt,
    }
  })
  const col = ref(res)

  return col
}
